import React from 'react';
import { Form, Input, Select, Button, Upload, message } from 'antd';
import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

export default function ArticleCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // 上传图片模拟
  const uploadProps = {
    beforeUpload: (file) => {
      message.success(`${file.name} 上传成功`);
      return false;
    },
    showUploadList: false,
  };

  // 保存
  const handleSave = async () => {
    try {
      // 只校验五个字段
      const values = await form.validateFields([
        'title', 'channel', 'category', 'type', 'keyword'
      ]);
      // 构造新文章数据（只包含七个字段，发布人和发布时间为固定值）
      const newArticle = {
        title: values.title,
        channel: values.channel,
        category: values.category,
        type: values.type,
        keyword: values.keyword,
        author: '管理员',
        date: '2022-01-23',
      };
      navigate('/article/publish', { state: { newArticle } });
    } catch (e) {
      // 校验失败
    }
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 1300, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, borderBottom: '2px solid #eee', paddingBottom: 12 }}>
          <div style={{ width: 10, height: 24, background: '#4880ff', borderRadius: 2, marginRight: 12 }} />
          <span style={{ fontWeight: 700, fontSize: 22 }}>文章内容新增</span>
          <CloseOutlined style={{ position: 'absolute', right: 24, top: 32, fontSize: 28, cursor: 'pointer' }} onClick={() => navigate(-1)} />
        </div>
        <Form
          form={form}
          layout="vertical"
          style={{ display: 'flex', gap: 32 }}
        >
          {/* 左侧表单 */}
          <div style={{ flex: 1, minWidth: 400 }}>
            <Form.Item
              label={<span><span style={{ color: 'red' }}>*</span><span style={{ fontWeight: 500, marginLeft: 4 }}>文章标题：</span></span>}
              name="title"
              rules={[{ required: true, message: '请输入文章标题' }]}
              colon={false}
              style={{ marginBottom: 0 }}
            >
              <Input placeholder="请输入文章标题" style={{ width: '80%' }} />
            </Form.Item>
            <Form.Item
              label={<span><span style={{ color: 'red' }}>*</span><span style={{ fontWeight: 500, marginLeft: 4 }}>发布渠道：</span></span>}
              name="channel"
              rules={[{ required: true, message: '请选择' }]}
              colon={false}
              style={{ marginBottom: 0 }}
            >
              <Select placeholder="请选择" style={{ width: '80%' }}><Option value="小程序">小程序</Option><Option value="官网">官网</Option></Select>
            </Form.Item>
            <Form.Item
              label={<span><span style={{ color: 'red' }}>*</span><span style={{ fontWeight: 500, marginLeft: 4 }}>发布频道：</span></span>}
              name="category"
              rules={[{ required: true, message: '请选择' }]}
              colon={false}
              style={{ marginBottom: 0 }}
            >
              <Select placeholder="请选择" style={{ width: '80%' }}><Option value="今日热点">今日热点</Option><Option value="推荐">推荐</Option></Select>
            </Form.Item>
            <Form.Item
              label={<span><span style={{ color: 'red' }}>*</span><span style={{ fontWeight: 500, marginLeft: 4 }}>文章类型：</span></span>}
              name="type"
              rules={[{ required: true, message: '请选择' }]}
              colon={false}
              style={{ marginBottom: 0 }}
            >
              <Select placeholder="请选择" style={{ width: '80%' }}><Option value="图文">图文</Option><Option value="视频">视频</Option></Select>
            </Form.Item>
            <Form.Item
              label={<span><span style={{ color: 'red' }}>*</span><span style={{ fontWeight: 500, marginLeft: 4 }}>关键词：</span></span>}
              name="keyword"
              rules={[{ required: true, message: '请输入关键词' }]}
              colon={false}
              style={{ marginBottom: 0 }}
            >
              <Input placeholder="请输入关键词" style={{ width: '80%' }} />
            </Form.Item>
            <Form.Item
              label={<span style={{ fontWeight: 500 }}>文章简介：</span>}
              name="desc"
              colon={false}
              style={{ marginBottom: 0 }}
            >
              <Input.TextArea placeholder="请输入文章简介" style={{ width: '80%', minHeight: 100 }} />
            </Form.Item>
          </div>
          {/* 右侧上传和富文本 */}
          <div style={{ flex: 1, minWidth: 400 }}>
            <Form.Item label={<span style={{ color: 'red' }}>*</span>} colon={false} style={{ marginBottom: 0 }}>
              <span style={{ fontWeight: 500 }}>文章封面：</span>
              <Form.Item name="cover" noStyle /*rules={[{ required: true, message: '请上传文章封面' }]}*/> <Upload {...uploadProps} listType="picture-card" style={{ width: 120 }}><div style={{ width: 100, height: 100, border: '1px dashed #ccc', borderRadius: 8, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#aaa', fontSize: 24 }}><PlusOutlined /><div style={{ fontSize: 14 }}>上传</div></div></Upload> </Form.Item>
            </Form.Item>
            <Form.Item label={<span style={{ color: 'red' }}>*</span>} colon={false} style={{ marginBottom: 0 }}>
              <span style={{ fontWeight: 500 }}>文章内容：</span>
              <Form.Item name="content" noStyle /*rules={[{ required: true, message: '请填写文章内容' }]}*/> <Input.TextArea placeholder="请填写文章内容" style={{ width: '90%', minHeight: 220 }} /> </Form.Item>
            </Form.Item>
          </div>
        </Form>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Button type="primary" style={{ width: 120, marginRight: 32 }} onClick={handleSave}>保存</Button>
          <Button style={{ width: 120 }} onClick={()=>navigate(-1)}>取消</Button>
        </div>
      </div>
    </div>
  );
} 